<template>
	<view class="page">
		<!-- Tab筛选 -->
		<view class="tab-container">
			<view 
				class="tab-item" 
				:class="{ active: currentTab === index }"
				v-for="(tab, index) in tabList" 
				:key="index"
				@click="changeTab(index)"
			>
				<text class="tab-text">{{ tab.name }}</text>
				<text class="tab-count">({{ tab.count }})</text>
			</view>
		</view>
		
		<!-- 提示信息 -->
		<view class="notice">
			<wd-icon name="warning" color="#ff6b35" size="14px"></wd-icon>
			<text class="notice-text">{{ tabList[currentTab].name }}不支持退款</text>

		</view>
		
		<!-- 课程列表 -->
		<view class="course-list">
			<view 
				class="course-item" 
				v-for="(course, index) in courseList" 
				:key="index"
			>
				<view class="course-left">
					<image class="coach-avatar" v-if="currentTab==0" :src="course?.venueUserEntity?.faceImgUrl" mode="aspectFill"></image>
					<view class="course-info">
						<view class="course-title">{{ course?.venueUserEntity?.name || '' }}</view>
						<view class="coach-phone">上课开始时间：{{ course?.venueClassTimeEntity?.startAt || ''  }}</view>
						<view class="coach-phone">上课结束时间：{{ course?.venueClassTimeEntity?.endAt || ''  }}</view>
						<view class="course-time">上课场馆：{{ course?.venueEntity?.name || '' }}</view>
						<view class="course-time">上课地点：{{ course?.venueEntity?.address || '' }}</view>
						<view class="course-time">联系电话：{{ course?.venueEntity?.telephone || '' }}</view>
					</view>
				</view>
				<!-- 状态标签 -->
				<view class="course-right">
					<view 
						class="status-tag" 
						:class="{
							'status-pending': course.useStatus === 0,
							'status-using': course.useStatus === 1,
							'status-completed': course.useStatus === 2
						}"
					>
						{{ getStatusText(course.useStatus) }}
					</view>
				</view>
			</view>
			<!-- 加载更多 -->
			 <wd-loadmore v-if="courseList?.length>0" :state="loadmoreState" />
		</view>
		<wd-status-tip v-if="courseList.length == 0" image="/static/viewNull.png"  :image-size="{ height: 50,  width: 50}" tip="暂无内容" />
		<fui-loading type="col" v-if="loadActive" :isFixed="true" :isMask="true"></fui-loading>
	</view>
</template>

<script setup>
	/**
	 * ==================== 数据定义 ====================
	 */
	
	// Tab筛选数据配置
	const tabList = ref([
		{ name: '私教课', count: '1对1' },   // 私人教练课程，一对一教学
		{ name: '团教课', count: '6人' },   // 小团体课程，6人一组
		{ name: '团操课', count: '20人' }   // 大团体操课，20人一组
	])
	const currentTab = ref(0) // 当前选中的Tab索引，默认选中第一个（私教课）
	const loadActive = ref(false);
	const currentTabIndex = ref(1);
	const orderList = ref([]);//分页总数据
	const total = ref(0);//分页总条数
	const pageNo = ref(0);//分页当前页码 从0开始
	const loadmoreState = ref('loading');
	
	// 日期筛选数据 - 显示最近一周的日期
	const dateList = ref([]) // 存储日期列表，格式：[{date: '08-07', fullDate: Date对象}]
	const currentDate = ref(0) // 当前选中的日期索引，默认选中第一个（今天）
	
	// 课程列表数据 - 模拟数据，实际应从API获取
	const courseList = ref([])
	
	/**
	 * ==================== 方法定义 ====================
	 */
	
	/**
	 * 获取状态文字
	 * @param {number} status - 状态值（0:待使用, 1:使用中, 2:已完成）
	 */
	const getStatusText = (status) => {
		switch(status) {
			case 0:
				return '待使用'
			case 1:
				return '使用中'
			case 2:
				return '已完成'
			default:
				return '未知状态'
		}
	}
	
	/**
	 * 切换Tab标签
	 * @param {number} index - Tab的索引（0:私教课, 1:团教课, 2:团操课）
	 */
	const changeTab = (index) => {
		currentTab.value = index;
		currentTabIndex.value = index+1;
		// 切换Tab后重新加载对应的课程数据
		getPage(true)
	}
	
	
	/**
	 * 加载课程数据
	 * 根据当前选中的Tab和日期加载对应的课程列表
	 */
	const getPage = async (init) => {
		if(init){
			pageNo.value = 0;
			courseList.value = [];
			loadActive.value = true;
		}
		const res = await uni.api.classOrderPage({
			orderType: currentTabIndex.value,
			pageNo: 0,
		})
		if (res.code === 0 && res.data) {
			let list = res.data?.data || [];
			total.value = res.data.total;
			courseList.value = [...courseList.value,...list];
			loadmoreState.value = total.value > courseList.value?.length ? 'loading' : 'finished';
	
		}
		loadActive.value = false
	}
		// 触底加载
	onReachBottom(() => {
		if (total.value <= courseList.value?.length) {
			loadmoreState.value = 'finished';
			return
		};
		pageNo.value += 1;
		getPage()
	})
	/**
	 * ==================== 生命周期 ====================
	 */
	onLoad(() => {
		// 加载初始课程数据
		getPage(true)
	})
</script>

<style lang="scss" scoped>
	.page {
		min-height: 100vh;
		background-color: #f5f5f5;
		padding: 0;
	}

	// 场馆信息
	.gym-info {
		display: flex;
		align-items: center;
		padding: 20rpx 30rpx;
		background-color: #fff;
		
		.gym-name {
			margin-left: 10rpx;
			font-size: 28rpx;
			color: #333;
		}
	}

	// Tab筛选
	.tab-container {
		display: flex;
		background-color: #fff;
		padding: 20rpx 30rpx;
		border-bottom: 1rpx solid #f0f0f0;
		
		.tab-item {
			flex: 1;
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 20rpx 0;
			margin: 0 8rpx;
			border-radius: 8rpx;
			transition: all 0.3s ease;
			
			&.active {
				background-color: #000;
				
				.tab-text {
					color: #fff;
					font-weight: 600;
				}
				
				.tab-count {
					color: #fff;
				}
			}
			
			.tab-text {
				font-size: 32rpx;
				color: #999;
				margin-right: 8rpx;
			}
			
			.tab-count {
				font-size: 24rpx;
				color: #999;
			}
		}
	}

	// 提示信息
	.notice {
		display: flex;
		align-items: center;
		padding: 20rpx 30rpx;
		background-color: #fff;
		margin-bottom: 20rpx;
		
		.notice-text {
			margin-left: 8rpx;
			font-size: 24rpx;
			color: #ff6b35;
		}
	}

	// 日期筛选
	.date-container {
		display: flex;
		padding: 20rpx 30rpx;
		background-color: #fff;
		margin-bottom: 20rpx;
		
		.date-item {
			flex: 1;
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 16rpx 0;
			border-radius: 8rpx;
			margin: 0 8rpx;
			
			&.active {
				background-color: #000;
				
				.date-text {
					color: #fff;
				}
			}
			
			.date-text {
				font-size: 24rpx;
				color: #666;
			}
		}
	}

	// 课程列表
	.course-list {
		padding: 0 30rpx;
		
		.course-item {
			position: relative;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 30rpx;
			background-color: #fff;
			border-radius: 16rpx;
			margin-bottom: 20rpx;
			box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.06);
			
			.course-left {
				display: flex;
				align-items: center;
				flex: 1;
				
				.coach-avatar {
					width: 100rpx;
					height: 100rpx;
					border-radius: 50%;
					margin-right: 24rpx;
				}
				
				.course-info {
					flex: 1;
					
					.course-title {
						font-size: 28rpx;
						color: #333;
						font-weight: 500;
						margin-bottom: 12rpx;
					}
					
					.coach-phone {
						font-size: 24rpx;
						color: #666;
						margin-bottom: 8rpx;
					}
					
					.course-time {
						font-size: 24rpx;
						color: #666;
					}
				}
			}
			
			.course-right {
				position: absolute;
				top: 20rpx;
				right: 20rpx;
				z-index: 10;
				
				.status-tag {
					padding: 2rpx 8rpx;
					border-radius: 10rpx;
					font-size: 22rpx;
					font-weight: 500;
					text-align: center;
					min-width: 80rpx;
				}
				
				.status-pending {
					background-color: #fff3e0;
					color: #f57c00;
					border: 1rpx solid #ffcc80;
				}
				
				.status-using {
					background-color: #e8f5e8;
					color: #2e7d32;
					border: 1rpx solid #81c784;
				}
				
				.status-completed {
					background-color: #f3f4f6;
					color: #6b7280;
					border: 1rpx solid #d1d5db;
				}
				
				.course-price {
					font-size: 32rpx;
					color: #ff6b35;
					font-weight: 600;
					margin-bottom: 16rpx;
				}
				
				.book-btn {
					background-color: #000;
					color: #fff;
					padding: 12rpx 32rpx;
					border-radius: 24rpx;
					font-size: 26rpx;
				}
			}
		}
	}
</style>